<template>
  <div style="width:100vw;" class="class-center-box">
    <!-- 头部 -->
    <!-- <mt-header fixed title="课程中心">
      <router-link to="/StudyCenter" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
    </mt-header>-->
    <div>
      <div class="bscroll" ref="bscrolls">
        <div class="bscroll-container">
          <div class="default-page-box" v-show="!faceClass.length">
            <div class="default-page">
              <div class="default-text">哎呀，空空如也!</div>
            </div>
          </div>
          <div style="flex-wrap:wrap;" class="class-center-excellent-courses flex-row">
            <div
              @click="goFaceClass(item.id)"
              v-for="(item,index) in faceClass"
              :key="index"
              class="courses-card"
              :class="[(index+1)%2 == 0 ? marginRight : '']"
            >
              <div
                :style="`background-image:url(${item.coursePhoto || require('@/assets/homePicture/detail1.jpg')});`"
                class="img-box"
              >
                <!-- <img :src="item.coursePhoto || " alt /> -->
              </div>
              <div class="courses-tip">
                <div style="overflow:hidden;">
                  {{item.title}}
                </div>
              </div>
              <div class="user-msg flex-row">
                <p style="color:#4787e4;margin-right:5px;" class="iconfont iconxingming"></p>
                <p class="text-over">{{teachDetail.username}} · {{teachDetail.deptName || '外部导师'}}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { setText } from "../../untils/ddnavigate";
import BScroll from "better-scroll";
export default {
  data() {
    return {
      marginRight: "margin-right",
      faceClass: [],
      teachDetail:{}
    };
  },
  mounted() {
    let { id } = this.$route.query;
    let params = {
      id
    };
    this.$get("qryTeaInfoById", params).then(res => {
      if (res.success) {
        this.teachDetail = res.data;
        this.faceClass = res.data.goodCourseList;
      }
    });
    // 设置标题文字
    setText("精品课程");
    // better-scroll初始化
    this.initScroll("bscrolls");
  },
  methods: {
    initScroll(dom) {
      this.$nextTick(() => {
        let bscrollDom = this.$refs[dom];
        this.aBScroll = new BScroll(bscrollDom, {
          click: true
        });
      });
    },
    actionSheet() {
      this.sheetVisible = !this.sheetVisible;
    },
    goFaceClass(id) {
      this.$router.push({
        path: "/faceClass",
        query: { id, type: "homeface" }
      });
    },
    publicAjax() {
      this.$post("getGoodCourses").then(res => {
        if (res.success) {
          this.faceClass = res.data.goodCourseList;
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
@import url("~@/pagecss/class-center.less");
</style>